<template>
  <div id="container" ref="container">
    <div id="formContainer">
      <div id="signIn-signUp">
        <form action="" id="signInForm">
          <img src="../../assets/敏盖 Logo.png" style="width: 30%;" alt="logo加载失败">
          <h2 id="title">登录</h2>
          <div id="inputField">
            <i class="fa fa-user"></i>
            <input type="text" @keyup.enter="loginTest" maxlength="11" placeholder="电话号" v-model="loginForm.phone" ref="usercodeNode"
              @blur="testPhone" />
          </div>
          <span class="errorTips">{{loginForm.phone_errorText}}</span>
          <div id="inputField">
            <i class="fa fa-lock"></i>
            <input type="password" placeholder="密码" maxlength="18" ref="password_input1" v-model="loginForm.password"
              @blur="testPassword" @keyup.enter="loginTest" />
            <i class="fa fa-eye" ref="invisible1" @click="check_show" id="password1"></i>
          </div>
          <span class="errorTips">{{loginForm.password_errorText}}</span>
          <input type="button" class="submitBtn" id="submitLoginBtn" value="登录" @click.prevent="loginTest" />
        </form>
        <form action="" id="signUpForm">
          <img src="../../assets/敏盖 Logo.png" style="width: 30%;" alt="logo加载失败">
          <h2 id="title">忘记密码</h2>
          <div id="inputField">
            <i class="fa fa-user-circle"></i>
            <input type="text" @keyup.enter="toResetPassword" maxlength="18" placeholder="身份证号" @blur="resetTestUserCode"
              v-model="resetPassword.userCode" />
          </div>
          <span class="errorTips">{{resetPassword.userCode_errorText}}</span>
          <div id="inputField">
            <i class="fa fa-phone-square"></i>
            <input type="text" @keyup.enter="toResetPassword" maxlength="11" placeholder="电话号" @blur="resetTestPhone"
              v-model="resetPassword.phone" />
          </div>
          <span class="errorTips">{{resetPassword.phone_errorText}}</span>
          <input type="button" class="submitBtn" id="submitRegisterBtn" @click.prevent="toResetPassword" value="重置" />
        </form>
      </div>
    </div>
    <div id="panelsContainer">
      <div class="panel" id="leftPanel">
        <div class="content">
          <h3>忘记密码 ?</h3>
          <p>Welcome to register the information management system of Mingai cashmere goat, hope this system can bring
            convenience to your life.</p>
          <button type="button" class="submitBtn" id="signUpBtn" @click="change_page_addClass">点这里重置</button>
        </div>
        <img src="../../assets/image/log.svg" class="image">
      </div>
      <div class="panel" id="rightPanel">
        <div class="content">
          <h3>记得密码 ?</h3>
          <p>Welcome to the information management system of Mingai cashmere goat. I hope this system can bring
            convenience to your life.</p>
          <button type="button" class="submitBtn" id="signInBtn" @click="change_page_removeClass">点这里登录</button>
        </div>
        <img src="../../assets/image/register.svg" class="image">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 登录表单数据绑定对象
        loginForm: {
          phone: '',
          password: '',
          phone_errorText: '',
          password_errorText: '',
          loginStatus: {
            uPhoneStatus: false,
            uPasswdStatus: false
          }
        },
        resetPassword: {
          userCode: '',
          phone: '',
          userCode_errorText: '',
          phone_errorText: '',
          resetStatus: {
            resetUserCodeStatus: '',
            resetPhoneStatus: ''
          }
        },
        pageStatus: true, //当前页面位置(默认为登录页即true)
      }
    },
    methods: {
      async loginTest() {
        this.testPhone()
        this.testPassword()
        if (this.loginForm.loginStatus.uPhoneStatus && this.loginForm.loginStatus.uPasswdStatus && this.loginForm.userCode != '' && this.loginForm.password != '') {
          let { data } = await this.$axios({
            method: 'post',
            url: '/login',
            data: {
              phone: this.loginForm.phone,
              password: this.loginForm.password
            }
          })
          if (data.code === 0) {
            this.$message.success('登录成功')
            this.$router.push("/home")
          } else {
            this.$message.warning(data.msg)
          }
        } else {
          this.$message.error('身份证号或者密码有误,请检查您的输入!!!')
        }
      },

      //重置密码表单校验
      async toResetPassword() {
        this.resetTestUserCode()
        this.resetTestPhone()
        if (this.resetPassword.resetStatus.resetUserCodeStatus && this.resetPassword.resetStatus.resetPhoneStatus && this.resetPassword.userCode != '' && this.resetPassword.phone != '') {
          let { data } = await this.$axios({
            method: 'post',
            url: '/reSetPassword',
            data: {
              id: this.resetPassword.userCode,
              phone: this.resetPassword.phone
            }
          })
          if (data.code === 0) {
            this.change_page_removeClass()
            this.$message.success('密码重置成功,密码为身份证后六位')
          }
          if (data.code !== 0) {
            this.$message.warning("用户不存在或您已重置却未修改密码")
          }
        } else {
          this.$message.error('信息输入有误,请检查您的输入!!!')
        }
      },
      //登录和重置密码页面切换
      change_page_addClass() {
        this.pageStatus = false
        this.$refs.container.classList.add("signUpMode")
      },
      change_page_removeClass() {
        this.pageStatus = true
        this.$refs.container.classList.remove("signUpMode");
      },
      //密码框明密文切换
      check_show(event) {
        if (event.currentTarget.id === 'password1') {
          if (this.$refs.password_input1.type === "password") {
            this.$refs.password_input1.type = "text";
            this.$refs.invisible1.className = "fa fa-eye-slash";
          } else {
            this.$refs.password_input1.type = "password";
            this.$refs.invisible1.className = "fa fa-eye";
          }
        } else {
          if (this.$refs.password_input2.type === "password") {
            this.$refs.password_input2.type = "text";
            this.$refs.invisible2.className = "fa fa-eye-slash";
          } else {
            this.$refs.password_input2.type = "password";
            this.$refs.invisible2.className = "fa fa-eye";
          }
        }
      },
      recheck_show() {
        if (this.$refs.re_password_input.type === "password") {
          this.$refs.re_password_input.type = "text";
          this.$refs.re_invisible.className = "fa fa-eye-slash";

        } else {
          this.$refs.re_password_input.type = "password";
          this.$refs.re_invisible.className = "fa fa-eye";
        }
      },
      //表单验证规则
      testPhone() {
        if (!/^[0-9]{5,11}$/.test(this.loginForm.phone)) {
          this.loginForm.loginStatus.uPhoneStatus = false;
          this.loginForm.phone_errorText = "电话号为5到11位数字!";
        } else {
          this.loginForm.loginStatus.uPhoneStatus = true;
          this.loginForm.phone_errorText = "";
        }
      },
      testPassword() {
        if (!/^[A-z0-9]{6,18}$/.test(this.loginForm.password)) {
          this.loginForm.loginStatus.uPasswdStatus = false;
          this.loginForm.password_errorText = "密码为纯数字、纯字母或者数字和字母的组合,长度6-18位!";
        } else {
          this.loginForm.loginStatus.uPasswdStatus = true;
          this.loginForm.password_errorText = "";
        }
      },
      resetTestUserCode() {
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.resetPassword.userCode)) {
          this.resetPassword.resetStatus.resetUserCodeStatus = false;
          this.resetPassword.userCode_errorText = "身份证号为15位数字、18位的数字或17位数字加X!";
        } else {
          this.resetPassword.resetStatus.resetUserCodeStatus = true;
          this.resetPassword.userCode_errorText = "";
        }
      },
      resetTestPhone() {
        if (!/^[0-9]{1,11}$/.test(this.resetPassword.phone)) {
          this.resetPassword.resetStatus.resetPhoneStatus = false;
          this.resetPassword.phone_errorText = "电话号为5到11位数字!";
        } else {
          this.resetPassword.resetStatus.resetPhoneStatus = true;
          this.resetPassword.phone_errorText = "";
        }
      },


      //回车确定登录或重置
      watchEnter(e) {
        if (e.key == "Enter" && this.pageStatus) {
          this.loginTest()
        } else if (e.key == "Enter" && !this.pageStatus) {
          this.toResetPassword()
        }
      }
    },
    //监听键盘事件
    mounted() {
      document.addEventListener('keyup', this.watchEnter);
    },
    beforeRouteLeave(to, from, next) {
      document.removeEventListener('keyup', this.watchEnter) //路由跳转前移除事件监听
      next()
    }
  }
</script>

<style Lang="less" scoped>
  /* less-loader安装的版本过高,降级或者将lang的l改为L */
  .errorTips {
    color: red;
    font-size: 0.7rem;
    margin: 0 auto;
    display: inline-block;
    height: 20px;
  }

  #container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #fff;
    overflow: hidden;
  }

  #container:before {
    content: "";
    position: absolute;
    width: 2000px;
    height: 2000px;
    border-radius: 50%;
    /* background: linear-gradient(-45deg, #4481eb, #04befe); */
    background: linear-gradient(-45deg, #01be2a, #29bbff);
    top: -10%;
    right: 48%;
    transform: translateY(-50%);
    z-index: 6;
    transition: 1.8s ease-in-out;
    animation: move 2s;
  }

  @keyframes move {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translateY(-50%);
    }
  }

  #formContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  #signIn-signUp {
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    width: 50%;
    display: grid;
    grid-template-columns: 1fr;
    z-index: 7;
    transition: 1s 0.7s ease-in-out;
    animation: signIn_move 2s;
  }

  @keyframes signIn_move {
    from {
      left: 100%;
    }

    to {
      left: 75%;
    }
  }

  #signInForm,
  #signUpForm {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    grid-column: 1/2;
    grid-row: 1/2;
    padding: 0 5rem;
    overflow: hidden;
    transition: 0.2s 0.7s ease-in-out;
  }

  #signInForm {
    z-index: 2;
  }

  #signUpForm {
    z-index: 1;
    opacity: 0;
  }

  #title {
    font-size: 2.2rem;
    color: #444;
    margin-bottom: 10px;
  }

  #inputField {
    max-width: 380px;
    width: 100%;
    height: 40px;
    background-color: #f0f0f0;
    border-radius: 40px;
    display: grid;
    grid-template-columns: 15% 70% 15%;
    padding: 0.4rem;

  }

  #inputField i {
    display: flex;
    justify-content: center;
    line-height: 40px;
    color: #acacac;
  }

  #inputField input {
    background: none;
    outline: none;
    border: none;
    line-height: 1;
    font-weight: 600;
    font-size: 1rem;
    color: #333;
  }

  #inputField input::placeholder {
    color: #aaa;
    font-weight: 500;
  }

  .submitBtn {
    width: 150px;
    height: 50px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    background-color: #00d346;
    color: #fff;
    font-weight: 600;
    letter-spacing: 5px;
    font-size: 0.9rem;
    margin: 10px 0;
    transition: 0.5s;
  }

  .submitBtn:hover {
    background-color: #00da49;
  }

  #panelsContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #leftPanel,
  #rightPanel {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-around;
    text-align: center;
    z-index: 6;
  }

  #leftPanel {
    pointer-events: all;
    padding: 3rem 17% 2rem 12%;
    animation: leftPanel_move 2s;
  }

  @keyframes leftPanel_move {
    from {
      transform: translateX(-500px);
    }

    to {
      transform: translateX(0);
    }
  }

  #rightPanel {
    pointer-events: none;
    padding: 3rem 12% 2rem 17%;
  }

  .panel .content {
    color: #fff;
    transition: 0.9s 0.6s ease-in-out;
  }

  .content h3 {
    font-weight: 600;
    line-height: 1;
    font-size: 1.5rem;
  }

  .content p {
    font-size: 1rem;
    padding: 0.6rem 0;
  }

  #signUpBtn,
  #signInBtn {
    margin: 0;
    background: none;
    border: 2px solid #fff;
    width: 130px;
    height: 40px;
    font-size: 0.8rem;
  }

  .image {
    width: 100%;
    transition: 1.1s 0.4s ease-in-out;
  }

  #rightPanel .content,
  #rightPanel .image {
    transform: translateX(800px);
  }

  #container.signUpMode:before {
    transform: translate(100%, -50%);
    right: 52%;
  }

  #container.signUpMode #leftPanel .image,
  #container.signUpMode #leftPanel .content {
    transform: translateX(-800px);
  }

  #container.signUpMode #rightPanel .image,
  #container.signUpMode #rightPanel .content {
    transform: translateX(0px);
  }

  #container.signUpMode #leftPanel {
    pointer-events: none;
  }

  #container.signUpMode #rightPanel {
    pointer-events: all;
  }

  #container.signUpMode #signIn-signUp {
    left: 25%;
  }

  #container.signUpMode #signInForm {
    z-index: 1;
    opacity: 0;
  }

  #container.signUpMode #signUpForm {
    z-index: 2;
    opacity: 1;
  }

  @media (max-width: 870px) {
    #container {
      min-height: 800px;
      height: 100vh;
    }

    #container:before {
      width: 1500px;
      height: 1500px;
      left: 30%;
      bottom: 68%;
      transform: translateX(-50%);
      right: initial;
      top: initial;
      transition: 2s ease-in-out;
      animation: move 2s;
    }

    @keyframes move {
      from {
        transform: translateX(-100%);
      }

      to {
        transform: translateX(-50%);
      }
    }

    #signIn-signUp {
      width: 100%;
      left: 50%;
      top: 95%;
      transform: translate(-50%, -100%);
      transition: 1s 0.8s ease-in-out;
      animation: signIn_move 2s;
    }

    @keyframes signIn_move {
      from {
        left: 100%;
      }

      to {
        left: 50%;
      }
    }

    #panelsContainer {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 2fr 1fr;
    }

    #leftPanel,
    #rightPanel {
      flex-direction: row;
      justify-content: space-around;
      align-items: center;
      padding: 2.5rem 8%;
    }

    .panel .content {
      padding-right: 15%;
      transition: 0.9s 0.8s ease-in-out;
    }

    .panel h3 {
      font-size: 1.2rem;
    }

    .panel p {
      font-size: 0.7rem;
      padding: 0.5rem 0;
    }

    #signInBtn,
    #signUpBtn {
      width: 110px;
      height: 35px;
      font-size: 0.7rem;
    }

    .image {
      width: 200px;
      transition: 0.9s 0.6s ease-in-out;
    }

    #leftPanel {
      grid-row: 1/2;
    }

    #rightPanel {
      grid-row: 3/4;
    }

    #rightPanel .content,
    #rightPanel .image {
      transform: translateY(300px);
    }

    #container.signUpMode:before {
      transform: translate(-50%, 100%);
      bottom: 32%;
      right: initial;
    }

    #container.signUpMode #leftPanel .image,
    #container.signUpMode #leftPanel .content {
      transform: translateY(-300px);
    }

    #container.signUpMode #signIn-signUp {
      top: 5%;
      transform: translate(-50%, 0);
      left: 50%;
    }
  }

  @media (max-width: 570px) {
    form {
      padding: 0 1.5rem;
    }

    .image {
      display: none;
    }

    .panel .content {
      padding: 0.5rem 1rem;
    }

    #container:before {
      bottom: 72%;
      left: 50%;
    }

    #container.signUpMode:before {
      bottom: 28%;
      left: 50%;
    }
  }
</style>